<!-- src/App.vue -->
<template>
  <el-container style="min-height: 100vh;">
    <!-- 导航栏 -->
    <el-header style="border-bottom: 1px solid #eee;">
      <div style="display: flex; justify-content: space-between; padding: 0 20px;">
        <div>
          <router-link to="/" style="margin-right: 20px;">首页</router-link>
          <router-link to="/cart" style="margin-right: 20px;">购物车</router-link>
        </div>
        <div>
          <template v-if="store.user">
            <span>{{ store.user.username }}</span>
            <el-button type="text" @click="logout" style="margin-left: 10px;">退出</el-button>
          </template>
          <template v-else>
            <router-link to="/login" style="margin-right: 10px;">登录</router-link>
            <router-link to="/register">注册</router-link>
          </template>
        </div>
      </div>
    </el-header>

    <!-- 页面内容 -->
    <el-main>
      <router-view />  <!-- 路由对应的页面会在这里显示 -->
    </el-main>
  </el-container>
</template>

<script setup>
import { useStore } from './store'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

// 退出登录
const logout = () => {
  store.user = null
  store.cart = []
  router.push('/login')
}
</script>
